<template>
  <div>
    <h2>图片预览 viewer</h2>
    <div class="images" id="image">
      <div v-for="(item, index) in imageList" :key="index" class="image">
        <img :src="item" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
const imageList = [
  "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604682659425&di=dc21787512bc242fb21c3443a038764d&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F30%2F29%2F01300000201438121627296084016.jpg",
  "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604682659425&di=4bd9a2ec275bc09756cbfc5d97be6dd7&imgtype=0&src=http%3A%2F%2Fa4.att.hudong.com%2F52%2F52%2F01200000169026136208529565374.jpg",
  "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604682659425&di=70da2454acd84dfa4186f0b2e21841af&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F02%2F38%2F01300000237560123245382609951.jpg",
  "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604682659425&di=69285a6f2c970949616e60a31ada633d&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F86%2F10%2F01300000184180121920108394217.jpg"
];
import Viewer from "viewerjs";
import "viewerjs/dist/viewer.css";
export default {
  name: "viewer",
  data: () => ({
    imageList: [
      ...imageList,
      ...imageList,
      ...imageList,
      ...imageList,
      ...imageList,
      ...imageList,
      ...imageList,
      ...imageList,
      ...imageList,
      ...imageList,
      ...imageList,
      ...imageList,
      ...imageList,
      ...imageList,
      ...imageList
    ]
  }),
  computed: {},
  mounted() {
    const viewer = new Viewer(document.getElementById("image"), {
      inline: false, // 是否是在改dom元素内部
      toolbar: {
        // 数字 0-4 表示不同尺寸下的显隐情况
        zoomIn: 4,
        zoomOut: 4,
        oneToOne: 4,
        reset: 4,
        prev: 4,
        play: {
          show: 4,
          size: "large"
        },
        next: 4,
        rotateLeft: 4,
        rotateRight: 4,
        flipHorizontal: 4,
        flipVertical: 4
      },
      filter(image) {
        // 图片过滤
        //console.log(image);
        return image.complete; // 返回图片能正常访问的
      },
      url(image) {
        // 图片地址处理
        console.log(image);
        return image.src.replace("?size=160", "");
      },
      viewed() {
        console.log("viewed");
        viewer.zoomTo(1);
        //viewer.move(2);
        //viewer.moveTo(2);
        //viewer.rotate(45);
        //viewer.scale(-1);
      },
      play() {
        console.log("play");
      },
      show() {
        console.log("show");
      },
      hide() {
        console.log("hide");
      },
      shown() {
        console.log("shown");
      }
    });
    console.log(viewer);
  },
  watch: {},
  methods: {}
};
</script>

<style scoped lang="scss">
.images {
  display: flex;
  flex-wrap: wrap;
}
.image {
  width: 300px;
  height: 300px;
  img {
    max-width: 100%;
    max-height: 100%;
  }
}
</style>
